<!--
 * Copyright (c) 2017-2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
 * which is available at https://www.apache.org/licenses/LICENSE-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
-->

<nav class="navbar navbar-light bg-faded" *ngIf="!hideNavBarState" [@navbarInOut]>
    <form class="form-inline" style="justify-content: center;">
        <h3 style="margin-right: .5em;">winery</h3>
        <button class="btn btn-sm align-middle btn-success" type="button" style="margin: 2px"
                (click)="saveTopologyTemplateToRepository()">Save
        </button>

        <div class="btn-group" data-toggle="buttons" style="margin-left: 4px;">
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="layout"
                (click)="toggleButton($event)">
                Layout<i class="fa fa-th" aria-hidden="true" style="padding-left: .5em; pointer-events: none;"></i>
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="alignh"
                (click)="toggleButton($event)">
                Align<i class="fa fa-ellipsis-h" style="padding-left: .5em; pointer-events: none;"></i>
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="alignv"
                (click)="toggleButton($event)">
                Align<i class="fa fa-ellipsis-v" style="padding-left: .5em; pointer-events: none;"></i>
            </button>
        </div>
        <div class="btn-group" data-toggle="buttons" style="margin-left: 4px">
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="ids"
                (click)="toggleButton($event)"
                [style.background-color]="getStyle(navbarButtonsState.buttonsState.idsButton)">
                Ids
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="types"
                (click)="toggleButton($event)"
                [style.background-color]="getStyle(navbarButtonsState.buttonsState.typesButton)">
                Types
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="properties"
                (click)="toggleButton($event)"
                [style.background-color]="getStyle(navbarButtonsState.buttonsState.propertiesButton)">
                Properties
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="deploymentArtifacts"
                (click)="toggleButton($event)"
                [style.background-color]="getStyle(navbarButtonsState.buttonsState.deploymentArtifactsButton)">
                Deployment Artifacts
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="requirementsCapabilities"
                (click)="toggleButton($event)"
                [style.background-color]="getStyle(navbarButtonsState.buttonsState.requirementsCapabilitiesButton)">
                Requirements & Capabilities
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="policies"
                (click)="toggleButton($event)"
                [style.background-color]="getStyle(navbarButtonsState.buttonsState.policiesButton)">
                Policies
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="targetLocations"
                (click)="toggleButton($event)"
                [style.background-color]="getStyle(navbarButtonsState.buttonsState.targetLocationsButton)">
                Target Locations
            </button>
            <button
                class="btn btn-sm align-middle dark-button-style"
                type="button"
                id="importTopology"
                (click)="toggleButton($event)"
                [style.background-color]="getStyle(navbarButtonsState.buttonsState.importTopologyButton)">
                Import Topology
            </button>
        </div>
        <button class="btn btn-sm align-middle dark-button-style" type="button" style="margin-left: 4px">Print View
        </button>
        <div class="btn-group" style="margin-left: 4px" dropdown>
            <button dropdownToggle type="button" class="btn btn-sm dark-button-style align-middle dropdown-toggle">
                Other <span class="caret"></span>
            </button>
            <ul *dropdownMenu class="dropdown-menu" role="menu">
                <li role="menuitem"><a class="dropdown-item" href="#">Complete Topology</a></li>
                <li role="menuitem">
                    <button style="cursor: pointer" #exportCsarButton target="_blank"
                            tooltip="Hold CTRL key to export XML only."
                            placement="left" class="dropdown-item" (click)="exportCsar($event)">Export CSAR
                    </button>
                </li>
                <li role="menuitem"><a class="dropdown-item" href="#">About</a></li>
            </ul>
        </div>
    </form>
</nav>
